<template>
    <div class="action-content" v-loading="loading">
        <div class="action-item" v-for="(item,index) in list" v-show="list.length">
            <div class="left">
                  <p>物料名称：{{ item.productNmae }}</p>
                  <p>颜色：{{ item.productColour }}</p>
                   <p>规格：{{ item.productSku }}</p>
                    <p>数量：{{ item.productNum }}</p>
                <p>发布时间：{{ item.pushTime }}</p>
                <p>
                    <span class="label">计划完成时间：</span>
                    <template v-if="!item.edit">
                        <span>{{ item.finishDate || '未填写' }}</span>
                    </template>
                    <template v-else>
                        <el-date-picker v-model="item.tempTime" type="date" size="mini"
                                        value-format="yyyy-MM-dd" placeholder="选择完成时间"
                                        :clearable="false" :key="item.taskId + index"
                                        @change="(date) => onPlanChange(item, date)"/>
                    </template>
                    <el-button v-if="item.status !== taskStatus.complete.value && step !== taskStepEnum.complete.value"
                               v-hasPermi="[hasPermi]" size="mini" plain
                               :type="item.edit ? 'default' : 'primary'"
                               @click="item.edit = !item.edit;">
                        {{ item.edit ? '取消' : '修改' }}
                    </el-button>
                </p>
                <p v-if="step==taskStepEnum.plating.value||step==taskStepEnum.ball.value">
                    <span class="label">交付客户：</span>
                    <template v-if="!item.edit">
                        <span>{{ item.deliver || '未填写' }}</span>
                    </template>
                    <template v-else>
                      <el-input v-model="item.inputDeliver" placeholder="请输入内容" @blur="changeDeliver(item,item.inputDeliver)"></el-input>
                    </template>
                    <el-button v-if="item.status !== taskStatus.complete.value && step !== taskStepEnum.complete.value"
                               v-hasPermi="[hasPermi]" size="mini" plain
                               :type="item.edit ? 'default' : 'primary'"
                               @click="item.edit = !item.edit;">
                        {{ item.edit ? '取消' : '修改' }}
                    </el-button>
                </p>
                <p v-for="item in item.resutList">
                    {{ item.productName }} ：*{{ item.productNum }}
                </p>
            </div>
            <div class="right">
                <div class="button-row" v-hasPermi="[hasPermi]"
                     v-if="item.status !== taskStatus.complete.value && step !== taskStepEnum.complete.value">
                    <el-button v-if="item.canReject==1&&step !== taskStepEnum.news.value" type="primary" size="small"
                               @click="onTaskHandle(item, taskHandleEnum.reject)">
                        驳回
                    </el-button>
                    <el-button v-if="item.status !== taskStatus.complete.value && step !== taskStepEnum.complete.value" type="primary" size="small"
                               @click="onTaskHandle1(item,'bushu')">
                        补数
                    </el-button>
                    <el-button type="primary" size="small" @click="onTaskHandle(item, taskHandleEnum.complete)">
                        完成<span v-for="item in taskStepEnum"
                                v-show="item.value === step && step !== taskStepEnum.complete.value">{{ item.label }}
                        </span>
                    </el-button>
                </div>
                <p>完成时间：{{ item.completeTime }}</p>
                <p v-if="item.backTime">打回时间：{{ item.backTime }}</p>
                <p>经办人：{{ item.handleName }}</p>

            </div>
        </div>
        <p v-show="!list.length" class="empty-tips">{{ emptyTips || '暂无数据' }}</p>

    </div>
</template>

<script>
import {handleEnum, responseEnum, taskHandleEnum, taskStatus, taskStepEnum, taskTypeEnum} from "../../../const/const";
import {taskHandle, updatePlanComplete,updateDeliver} from "./api";

export default {
    props: ['data', 'step', 'emptyTips', 'hasPermi'],
    data() {
        return {
            edit: false,
            taskStepEnum,
            taskHandleEnum,
            taskStatus,
            loading: false,

            // 处理完成标识
            handleComplete: false
        }
    },
    computed: {
        list() {
            const val = this.data || [];
            val.forEach(item => {
                if(item.status==0){
                    // 设置每个条目的编辑状态、加载状态、临时绑定时间控件的model
                    this.$set(item, 'edit', true);
                    this.$set(item, 'tempTime', item.finishDate);
                    this.$set(item, 'inputDeliver', item.deliver);
                }else{
                   // 设置每个条目的编辑状态、加载状态、临时绑定时间控件的model
                   this.$set(item, 'edit', false);
                   this.$set(item, 'tempTime', item.finishDate);
                   this.$set(item, 'inputDeliver', item.deliver);
                }
            })
            return val;
        }
    },
    methods: {
        changeDeliver(row,deliver){
          this.loading = true;
          updateDeliver(row.taskId, deliver).then(res => {
              if (res.code === responseEnum.success) {
                  this.$message.success('交付客户信息已经更新');
                  // 更新成功则更新原值
                  row.deliver = deliver;
              } else {
                  this.$message.error(res.msg);
                  // 否则重置原值
                  row.inputDeliver = row.deliver;
              }
          }).catch(() =>   row.inputDeliver = row.deliver).finally(() => this.loading = false)
        },
        /**
         * 更新计划完成时间
         */
        onPlanChange(row, date) {
            this.loading = true;
            updatePlanComplete(row.taskId, date).then(res => {
                if (res.code === responseEnum.success) {
                    this.$message.success('计划完成时间已更新');
                    // 更新成功则更新原值
                    row.finishDate = date;
                } else {
                    this.$message.error(res.msg);
                    // 否则重置原值
                    row.tempTime = row.finishDate;
                }
            }).catch(() => row.tempTime = row.finishDate).finally(() => this.loading = false)
        },
        onTaskHandle1(row,types){
        this.$emit('showNeedsData',{taskId:row.taskId,types:types})
        },

        /**
         * 任务操作
         */
        onTaskHandle(row, type) {
            let text = '', handle = handleEnum.taskComplete;
            if (type === taskHandleEnum.complete) {
                Object.keys(taskStepEnum).forEach(key => {
                    if (taskStepEnum[key].value === this.step) {
                        text = this.step === taskStepEnum.complete.value ? taskStepEnum[key].label : `完成${taskStepEnum[key].label}`;
                        handle = handleEnum.taskComplete;
                    }
                })
            } else {
                text = '驳回';
                handle = handleEnum.taskReject;
            }
            this.$confirm(`确定${text}吗？`, '提示').then(() => {
                const loading = this.$loading({lock: true})
                taskHandle(row.taskId, row.stepId, type).then(res => {
                    if (res.code == responseEnum.success) {
                        this.$message.success(`已${text}`);
                        this.$emit('complete', handle);
                    }else{
                         this.$emit('complete');
                         this.$message.error(res);
                    }
                }).finally(() => loading.close())
            })

        }
    }
}
</script>

<style lang="scss" scoped>
.action-content {
    max-height: 75vh;
    min-height: 180px;
    overflow: auto;
    margin: 0 -12px;
    padding: 0 12px;
    display: flex;
    flex-direction: column;

    .action-item {
        text-align: left;
        display: flex;
        justify-content: space-between;
        border: 1px solid #ddd;
        padding: 15px;
        margin: 10px;

        .left, .right {
            display: flex;
            flex-direction: column;
        }

        p {
            display: flex;
            align-items: center;
            margin: 5px 0;
            height: 28px;

            .label + * {
                flex: 1;
            }

            .el-button {
                margin-left: 5px;
                padding: 7px 10px;
            }
        }

        .left {
            width: 52%;

            p .label {
                width: 100px;
            }
        }

        .right {
            width: 40%;
            justify-content: end;
            align-items: end;

            p {
                width: 200px;

                .label {
                    width: 70px;
                }
            }

            .button-row {
                display: flex;
                flex-direction: row;
                justify-content: end;
                width: 100%;

                .el-button {
                    width: 40%;
                    margin-bottom: 5px;
                }
            }
        }
    }

    .empty-tips {
        text-align: center;
        line-height: 180px;
        font-size: 18px;
        margin: 0;
        color: #aaa;
    }
}

</style>
